<template>
<div>
  <!--  返回按钮-->
  <div>
    <van-nav-bar
        title="地址列表"
        left-text="返回"
        left-arrow
        @click-left="back()"
    />
  </div>
<!--  地址列表-->
  <div>
    <label v-for="l in list">
      <div class="l1">
        <h3>{{l.name}}--{{l.phone}}</h3>
        <h4>{{l.area}}--{{l.doorplate}}</h4>
        <van-row justify="space-around">
          <van-col span="6">
            <label v-if="l.flag" style="color:orangered">默认</label>
          </van-col>
          <van-col span="6">
            <van-button type="warning" @click="edit(l.id)">编辑</van-button>
          </van-col>
          <van-col span="6">
            <van-button type="danger" @click="del(l.id)">删除</van-button>
          </van-col>
        </van-row>
      </div>
    </label>
  </div>
<!--  添加地址按钮-->
  <div class="button">
    <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" round type="info" size="large" @click="add()">+添加地址</van-button>
  </div>


</div>
</template>

<script>
export default {
  name: "AddressListView",
  data(){
    return{
      list:[]
    }
  },
  mounted() {
    this.queryAll();
  },
  methods:{
    back() {
      this.$router.push("/my");
    },
    queryAll(){
      this.axios.get("/address/all.do?uid="+this.$store.state.token).then((res)=>{
        if(res.data.code==200){
          //console.log(JSON.stringify(res.data.data));
          if(res.data.data!=null){
            for (let i = 0; i < res.data.data.length; i++) {
              this.list[i]=res.data.data[i];
              //console.log(this.list[i]);
              //console.log(res.data.data[i]);
            }
          }else{
            this.$toast("还未添加地址");
          }
        }
      })
    },
    add(){
      this.$router.push("/addAddress");
    },
    edit(id){
      //console.log(id);
      this.$router.push({ path: '/editAddress', query: { id: id }});
    },
    del(id){
      //console.log(id);
      this.axios.get("/address/del.do?id="+id).then((res)=>{
        if(res.data.code==200){
          location.reload();
        }
      })
    }
  }
}
</script>

<style scoped>
.l1{
  background-color: ghostwhite;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  box-shadow: 5px 5px 3px gainsboro;
  border-radius: 20px;
  margin-bottom: 10px;
}
.button {
  background-color: #fff;
  padding-top: 10px;
  width: 100%;
  bottom: 0;
  height: 55px;
}
</style>